<template>
  <div class="sidebar-collapse">
    <component class="sidebar-collapse-icon" :is="isActive ? 'Expand' : 'Fold'" @click="toggleClick"></component>
  </div>
</template>
<script setup lang="ts">
defineOptions({
  name: "SidebarCollapse"
});
interface Props {
  isActive: boolean;
}

withDefaults(defineProps<Props>(), {
  isActive: false
});

const emit = defineEmits(["toggleClick"]);
const toggleClick = () => {
  emit("toggleClick");
};
</script>
<style scoped lang="scss">
.sidebar-collapse {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 40px;
  line-height: 40px;
  box-shadow: 0 0 6px -3px var(--el-color-primary);
  .sidebar-collapse-icon {
    width: 16px;
    height: 16px;
    display: inline-block;
    vertical-align: middle;
    cursor: pointer;
    color: #000000d9;
    transition-duration: 100ms;
    margin-left: 16px;
    margin-bottom: 4px;
  }
}
</style>
